<template>
  <el-row :gutter="18">
        <el-col :span="12">
            <div>

            </div>
            <div class="grid-content ep-bg-purple footer-main" id="echart">
                <img src="../../../img/用户数据/在线人数.png" alt="" />
            </div>
        </el-col>
        <el-col :span="12">
            <div class="grid-content ep-bg-purple footer-main footer-right">
                <div class="footer-header-a">
                    <span class="footer-header-a-a">直播间</span>
                    <butoon class="btn">查看更多</butoon>
                </div>
                <ul>
                    <li>
                        <img src="../../../../img/用户数据/头像.png" alt="">
                        <div class="footer-right-list1">马克华菲男装</div>
                        <div class="footer-right-list2 footer-la">
                            <p class="footer-p footer-p-1">直播场次</p>
                            <p class="footer-p footer-p-2">52场</p>
                        </div>
                        <div class="footer-right-list2 footer-pa">
                            <p class="footer-p footer-p-1">付款金额</p>
                            <p class="footer-p footer-p-2">￥446.8</p>
                        </div>
                        <div class="footer-right-list2 footer-pa">
                            <p class="footer-p footer-p-1">观看人数</p>
                            <p class="footer-p footer-p-2">5689</p>
                        </div>
                        <div class="footer-right-list2 footer-pa">
                            <p class="footer-p footer-p-1">人均观看时长</p>
                            <p class="footer-p footer-p-2">5分35秒</p>
                        </div>
                        <div class="footer-right-list2 footer-pa">
                            <p class="footer-p footer-p-1">平均UV价值</p>
                            <p class="footer-p footer-p-2">4.17</p>
                        </div>
                        <div class="footer-right-list2 footer-pa">
                            <p class="footer-p footer-p-1">平均转化率</p>
                            <p class="footer-p footer-p-2">5%</p>
                        </div>

                    </li>
                    <li>
                        <img src="../../../../img/用户数据/头像.png" alt="">
                        <div class="footer-right-list1">马克华菲男装</div>
                        <div class="footer-right-list2 footer-la">
                            <p class="footer-p footer-p-1">直播场次</p>
                            <p class="footer-p footer-p-2">52场</p>
                        </div>
                        <div class="footer-right-list2 footer-pa">
                            <p class="footer-p footer-p-1">付款金额</p>
                            <p class="footer-p footer-p-2">￥446.8</p>
                        </div>
                        <div class="footer-right-list2 footer-pa">
                            <p class="footer-p footer-p-1">观看人数</p>
                            <p class="footer-p footer-p-2">5689</p>
                        </div>
                        <div class="footer-right-list2 footer-pa">
                            <p class="footer-p footer-p-1">人均观看时长</p>
                            <p class="footer-p footer-p-2">5分35秒</p>
                        </div>
                        <div class="footer-right-list2 footer-pa">
                            <p class="footer-p footer-p-1">平均UV价值</p>
                            <p class="footer-p footer-p-2">4.17</p>
                        </div>
                        <div class="footer-right-list2 footer-pa">
                            <p class="footer-p footer-p-1">平均转化率</p>
                            <p class="footer-p footer-p-2">5%</p>
                        </div>

                    </li>
                </ul>
            </div>
        </el-col>
    </el-row>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import * as echarts from "echarts";

onMounted(() => {
    const echart = document.getElementById("echart");

    if (echart) {
        // 基于准备好的dom，初始化echarts实例
        const myChart = echarts.init(echart);
        // 绘制图表
        myChart.setOption({
            title: {
                text: '流量趋势图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['进场人数', '在线人数']
            },
            // toolbox: {
            //     feature: {
            //         saveAsImage: {}
            //     }
            // },
            grid: {

                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: ['06/29', '07/01', '07/03', '07/05', '07/07', '07/09', '07/11', '07/13', '07/15', '07/17', '07/19', '07/21']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '进场人数',
                    type: 'line',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [2600, 2000, 4000, 3500, 2000, 1700, 2300, 3000, 2300, 1950, 2301, 2850]
                },
                {
                    name: '在线人数',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [2800, 2600, 3200, 2900, 2800, 3400, 2600, 2400, 2450, 2420, 2250, 2050]
                },
            ]

        });
    }
});
</script>

<style lang="less" scoped>
.footer-main {
    height: 610px;
    background-color: #fff;
}
.footer-right {
    li {
        height: 66px;
        text-align: center;
        line-height: 66px;
        margin: 10px 10px;
        // background-color: #1acb1b;
        display: flex;

        img {
            width: 44px;
            height: 44px;
            margin: 11px;
        }

        .footer-right-list1 {
            font-size: 18px;
            font-weight: 800;
        }

        .footer-la {
            width: 18%;
            padding: 8px 28px;
            border-right: 1px solid #dde8ff;
        }

        .footer-pa {
            width: 12%;
        }

        .footer-right-list2 {
            box-sizing: border-box;
            height: 100%;
            flex-wrap: wrap;

            .footer-p {
                height: 30%;
                text-align: center;
                line-height: 33px;
            }

            .footer-p-1 {
                font-size: 12px;
                color: #cccccc;
            }

            .footer-p-2 {
                font-size: 18px;
                font-weight: 600;
            }
        }
    }
}
.footer-header-a{
    width: 100%;
    height: 10%;
    position: relative;
    .footer-header-a-a{
        font-size: 20px;
        font-weight: 900;
        position: absolute;
        top: 30px;
        left: 20px;
    }
    .btn{
        display: block;
        width:74px ;
        height: 30px;
        background-color: #8b68ff;
        border-radius: 5px;
        color: #fff;
        text-align: center;
        line-height: 30px;
        font-size: 16px;
        position: absolute;
        right: 20px;
        top: 30px;
    }
}
</style>